<form class="wide-form" method="POST" id="contact-form" onSublit="">
  <fieldset style='width: 420px; margin: 0 auto;'>
    <legend>Refer to a friend</legend>
    <label>Email address</label>
    <input type="text" placeholder="Enter email address…" name="email" id="email">
    <label>Enter your name</label>
    <input type="text" name="your_name" id="your_name">
    <label>Enter friends name</label>
    <input type="text" name="friends_name" id="friends_name">
	<br>
    <div style='text-align:center'><button type="submit" class="btn btn-success">Submit</button></div></center>
  </fieldset>
</form>
<script>
$(document).ready(function () {
    $('#contact-form').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            your_name: {
                minlength: 2,
                required: true
            },
            friends_name: {
                minlength: 2,
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        }
    });

});
</script>
